<style lang="scss" scoped>
    @import './index.scss';
    .p-wrap{
      position: relative;
      background: #fff;
      border-radius: 6px;
      width: 360px; height: 240px;
    }

    .p-title{
      width: 100%; height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 18px;
    }

    .p-input{
      display: block;
      margin: 40px auto;
      width: 80%; height: 40px;
      outline: none;
      border: 1px solid #eaeaea;
      padding: 0 10px;
      box-sizing: border-box;
      border-radius: 4px;
    }

    .p-btn-box{
      position: absolute;
      width: 100%;
      height: 100px;
      left: 0; bottom: 0;
      &>.cancel-btn{
        width: 80px; height: 40px;
        position: absolute;
        left: 60px; top: 50%;
        transform: translateY(-50%);
        font-size: 15px;
      }
      &>.confirm-btn{
        width: 80px; height: 40px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 60px;
        font-size: 15px;
      }
    }
    .none-display{
      padding-top: 200px;
      font-size: 22px;
    }
</style>

<template>
  <div v-if="manageInfo.userid">
      <div class="c-head">
        <div class="username">{{manageInfo.username}}</div>
        <yd-button class="delete-btn" bgcolor="#FF523E" color="#fff" @click.native="deleteFu">删除</yd-button>
      </div>

      <div class="c-body">
        <div class="c-item" v-if="manageInfo.state == 'enable'">
          <div class="c-text">正常状态</div>
          <yd-button class="forbid-btn" bgcolor="#F5A623" color="#fff" @click.native="forbidFu">禁用</yd-button>
        </div>

        <div class="c-item" v-else>
          <div class="c-text" style="color: #FF523E;">禁用状态</div>
          <yd-button class="forbid-btn" bgcolor="#303641" color="#fff" @click.native="startFu">启用</yd-button>
        </div>

        <div class="c-img">
          <img :src="manageInfo.usericon" >
        </div>

        <x-item label="名字" :text="manageInfo.username"/>
        <x-item label="备注" :text="manageInfo.comment">
          <span slot="label" class="change-btn" @click="update('lemo')">修改</span>
        </x-item>

        <div class="x-manager-date">
          <div class="x-label">管理期限至</div>
          <div class="x-msg">默认为商户版本到期日期</div>
          <div class="date">2018-06-19 15:00:11</div>
        </div>

        <x-item label="管理权限" :text="authStr">
          <span slot="label" class="change-btn" @click="updateAuth()">修改</span>
        </x-item>

        <x-item label="职能" :text="manageInfo.duty">
          <span slot="label" class="change-btn" @click="update('duty')">修改</span>
        </x-item>

        <x-item label="管理操作日志记录" text="0条"></x-item>
        <x-item label="最近登录：" :text="manageInfo.createtime | registTime"></x-item>
        <div class="regist-message">
          <div>注册信息</div>
        </div>
        <x-item label="注册方式" text="微信"></x-item>
        <x-item label="微信昵称" :text="manageInfo.username"></x-item>
        <x-item label="注册日期" :text="manageInfo.registrytime | registTime"></x-item>
        <x-item label="绑定手机" :text="manageInfo.userphone" style="margin-bottom: 70px;"></x-item>
      </div>

      <yd-popup v-model="show" position="center" :close-on-masker="false">
          <div class="p-wrap">
              <div class="p-title">修改{{changeType}}</div>
              <input type="text" class="p-input" v-model="content">
              <div class="p-btn-box">
                <yd-button type="hollow" class="cancel-btn" @click.native="show = false">取消</yd-button>
                <yd-button type="primary" class="confirm-btn" @click.native="confirm">确定</yd-button>
              </div>
          </div>
      </yd-popup>

      <yd-popup v-model="popAuth" position="center" width="750px">
        <div class="pop-content">
            <div class="pop-title2">管理权限 <yd-icon name="error" size="20px" color="#FF523E" class="pop-close" @click.native='popAuth = false'></yd-icon></div>
            <yd-checklist v-model="oauth" class="pop-checklist">
                <yd-checklist-item val="outframe" style="width: 100%;">
                    <div class="pop-item">外框</div>
                </yd-checklist-item>
                <yd-checklist-item val="infram">
                    <div class="pop-item">内框</div>
                </yd-checklist-item>
                <yd-checklist-item val="outmatcard">
                    <div class="pop-item">外衬卡纸</div>
                </yd-checklist-item>
                <yd-checklist-item val="middlematcard">
                    <div class="pop-item">中衬卡纸</div>
                </yd-checklist-item>
                <yd-checklist-item val="inmatcard">
                  <div class="pop-item">内衬卡纸</div>
                </yd-checklist-item>

                <div class="bg-ccc"></div>
                <yd-checklist-item val="agent">
                    <div class="pop-item">微代理</div>
                </yd-checklist-item>
                <yd-checklist-item val="paint">
                    <div class="pop-item">画芯</div>
                </yd-checklist-item>
                <div class="bg-ccc"></div>
                <yd-checklist-item val="order">
                  <div class="pop-item">订单</div>
                </yd-checklist-item>
            </yd-checklist>
            <div class="bg-block-ccc">
                <yd-button type="primary" class="submit-btn" @click.native="changeDuty">完成</yd-button>
            </div>
        </div>
    </yd-popup>
  </div>
  <div v-else class="none-display">暂无子管理员信息</div>
</template>

<script>
  import {mapActions, mapState} from 'vuex'
  export default {
    data () {
      return {
        content: '',
        show: false,
        changeType: '',
        popAuth: false,
        oauth: [],
        auth: ['outframe'],
        authObj: {
          outframe: '外框',
          infram: '内框',
          outmatcard: '外衬卡纸',
          middlematcard: '中衬卡纸',
          inmatcard: '内衬卡纸',
          agent: '微代理',
          paint: '画芯',
          order: '订单'
        }
      }
    },
    computed: {
      ...mapState({
        manageInfo: state => state.manage.manageInfo,
      }),
      authStr () {
        return this.auth.map(val => {
            return this.authObj[val]
        }).join('、')
      }
    },
    methods: {
      ...mapActions([
        'getManageInfo',
        'updateManage'
      ]),
      refresh(){
        var params = {
          userid: this.$route.query.id,
          action: 'get'
        }
        this.getManageInfo(params)
      },
      deleteFu () {
        this.$xalert.open({
          title: '是否删除子管理员' + this.manageInfo.username + '？',
          btnText: '删除',
          btnColor: '#FF523E',
          success: () => {
            this.$xalert.close()
            let params = {
              action:'deleteSubManager',
              subid: this.$route.query.id
            }
            this.updateManage(params)
              .then(data =>{
                this.$router.go(-1)
              })
          }
        })
      },
      forbidFu () {
        this.$xalert.open({
          title: '是否禁用子管理员' + this.manageInfo.username + '？',
          btnText: '禁用',
          btnColor: '#F5A623',
          success: () => {
            this.$xalert.close()
            let params = {
              action:'update',
                state: 'black',
                subid: this.$route.query.id
            }
            this.updateManage(params)
              .then(data =>{
                this.refresh()
                this.$store.state.needRefreshSubManager += 1
                this.$store.state.needRefreshInfo += 1

              })
          }
        })
      },
      startFu () {
        this.$xalert.open({
          title: '是否启用子管理员' + this.manageInfo.username + '？',
          btnText: '启用',
          btnColor: '#303641',
          success: () => {
            this.$xalert.close()
            let params = {
              action:'update',
              state: 'enable',
              subid: this.$route.query.id
            }
            this.updateManage(params)
              .then(data =>{
                this.refresh()
                this.$store.state.needRefreshSubManager += 1
                this.$store.state.needRefreshInfo += 1
              })
          }
        })
      },
      confirm () {
        this.show = false
        if(this.changeType == '备注'){
          let params = {
            action:'update',
            comment: this.content,
            subid: this.$route.query.id
          }
          this.updateManage(params)
            .then(data =>{
              this.refresh()
            })
        }else if(this.changeType == '职能'){
          let params = {
            action:'update',
            duty: this.content,
            subid: this.$route.query.id
          }
          this.updateManage(params)
            .then(data =>{
              this.refresh()
            })
        }
      },
      update (type) {
        this.show = true
        this.content = ''
        if (type === 'lemo') {
          this.changeType = '备注'
        } else if(type == 'duty'){
          this.changeType = '职能'
        }
      },
      updateAuth () {
        this.popAuth = true
        this.oauth = [...this.auth]

      },
      changeDuty () {
        console.log(this.auth)
        this.auth = [...this.oauth]
        this.popAuth = false

        let params = {
          action:'update',
          auth: this.auth,
          subid: this.$route.query.id
        }
        this.updateManage(params)
          .then(data =>{
            this.refresh()
          })
      }
    },
    mounted(){

    },
    filters: {
      registTime (v) {
        if (v) {
          return v.substring(0, 4) + '-' + v.substring(4, 6) + '-' + v.substring(6, 8) + ' ' + v.substring(8, 10) + ':' + v.substring(10, 12) + ':' + v.substring(12, 14)
        }
      },
      viptime (v) {
        if (v) {
          return new Date(Math.floor(v)).format('YYMMDD hh:mm:ss')
        }
      }
    }
  }
</script>
